<template>
  <!-- 分包预留页面 -->
  <view class="pageLayout">
    <view class="title">{{ title }}</view>
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="clickItem(item)"
      >
        <view class="icon">
          <u-icon
            color="#000000"
            slot="icon"
            size="55rpx"
            :name="item.uIcon"
          ></u-icon>
        </view>
        <view class="text">{{ item.label }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      required: true,
      type: Array,
      default: () => [],
    },
    title: {
      required: true,
      type: String,
      default: "",
    },
  },

  components: {},
  data() {
    return {};
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 跳转
     * @param item 列表项
     */
    clickItem(item) {
      uni.navigateTo({ url: item.url });
    },
  },
  onShow() {},
};
</script>
<style lang="scss" scoped>
.pageLayout {
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 18rpx;
  margin-bottom: 20rpx;
}
.list {
  display: flex;
  flex-wrap: wrap;
  .item {
    text-align: center;
    margin-bottom: 30rpx;
    margin: 0 30rpx 20rpx;
    .icon {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .text {
      font-size: 24rpx;
      color: #666666;
    }
  }
}
.title {
  font-size: 28rpx;
  color: #333333;
  font-weight: bolder;
  margin-bottom: 25rpx;
}
</style>